<template>
	<view class="content">
		<view class="box list-box">
			<button class="item" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			  头像设置 <image :src="avatarUrl" mode=""></image>
			</button> 
			<button  class="item">
			当前版本 <view class="r">1.000.01</view>
			</button>
		</view>
		<button class="box btn">
			退出登录
		</button>
	</view>
</template>

<script setup>
	import {ref} from 'vue' 
	const avatarUrl=ref('/static/head.png')
	const onChooseAvatar=(e)=>{
		 avatarUrl.value=e.detail.avatarUrl
	}
</script>
<style>	
	page{
		background: #F5F6FA;
	}
</style>
<style lang="scss" scoped>
	.list-box{
		background-color: #fff;
		padding:0 20rpx;
		margin-top:20rpx;
		border-radius: 20rpx;
		.item{
			display:flex;justify-content: space-between;align-items: center;
			background-color: #fff;line-height: 110rpx;border-radius: 0;
			padding:0;
			font-size: 28rpx;border-top:2rpx solid #E5E5E5;
			&:nth-child(1){
				border:0;
			}
			.it{
				flex:1;
				display:flex;justify-content: space-between;align-items: center;
			}
			&:after,&:before{
				display: none;
			}
			image{width:64rpx;height:64rpx;border-radius: 80rpx;}
			.r{
				display: flex;align-items: center;color:#999;
			}
		}
	}
	.btn{
		margin-top:40rpx;
		line-height: 84rpx;
		background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: bold;color:#fff;
		font-size:28rpx;
	}
	
	
</style>
